<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="applicable-device" content="mobile,pc">
  <meta name="mobile-agent" content="format=html5,url={{website}}">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<base href="http://www.kanman.com">
  <title>一个没有改版的我，怎能配上品位最叼的你 </title>
  <link rel="stylesheet" href="/static/swiper.min.css"> 
   <link rel="stylesheet" href="/static/animate.css"> 
  <style type="text/css">
  /*通用样式*/ *{ margin: 0; padding: 0; } html{ font-size: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /*水平垂直居中*/ .vh_center{ display: flex; justify-content: center; align-items: center; } /*水平居中*/ .h_center{ display: flex; justify-content: center; align-items: flex-start; } /*顶部logo-box*/ .top{ position: relative; width: 100%; height: 4rem; background: url("./img/top_bg.png") center no-repeat; background-size: cover; } .logo{ margin-top: 0.94rem; width: 1.58rem; height: 0.61rem; } .clking-hand,.bubble{ position: absolute; } .clking-hand{ width: 4.17rem; height: 1.98rem; left: -0.91rem; top: 0.66rem; z-index: 10; animation: slide_left 0.8s 0.5s both ease-in-out; } .bubble{ width: 2.76rem; height: 1.66rem; top: 1.79rem; left: 2.62rem; z-index: 9; animation: slide_down 0.5s both ease-in-out; } .fp{ position: absolute; top: 4rem; width: 100%; height: 10.35rem; background: url("./img/fp_bg.jpg") center no-repeat; background-size: cover; z-index: -10; } .fp_img{ position: absolute; bottom: 0; right: 0; width: 7.13rem; height: 9.23rem; } .fp_blank{ width: 100%; height: 9.35rem; } .screen_1,.screen_2,.screen_3{ position: relative; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; } .screen_1{ height: 9.67rem; margin-top: 0.5rem; } .screen_2{ height: 7.84rem; margin-top: 0.94rem; } .screen_3{ height: 8.17rem; margin-top: 1.3rem; } .bubble1{ width: 6.13rem; height: 3.4rem; } .bubble2{ width: 5.69rem; height: 1.95rem; } .bubble3{ width: 5.64rem; height: 2rem; } .screen_1_img{ width: 7.01rem; height: 6.27rem; } .screen_2_img{ width: 7.01rem; height: 5.49rem; margin-top: 0.4rem; } .screen_3_img{ width: 7.4rem; height: 5.61rem; margin-top: 0.56rem; } .v_text{ margin-top: 0.78rem; } .v_text_img{ width: 0.4rem; height: 3.83rem; } .bottom{ margin-top: 0.17rem; } .phone_download{ width: 5.42rem; height: 7.06rem; } /*tags*/ [class^="tag_"]{ position: absolute; height: 0.51rem; } /*screen_1*/ .tag_1{ top: 7.39rem; left: 0.98rem; width: 1.87rem; } .tag_2{ top: 6.89rem; left: 4.78rem; width: 2.55rem; } .tag_3{ top: 7.79rem; left: 4.08rem; width: 1.45rem; } /*screen_2*/ .tag_4{ top: 5.1rem; left: 3.09rem; width: 2.55rem; } .tag_5{ top: 6.6rem; left: 6.09rem; width: 1.22rem; } /*screen_3*/ .tag_6{ top: 5.65rem; left: 0.34rem; width: 1.72rem; } .tag_7{ top: 5.75rem; left: 4.84rem; width: 1.94rem; } .tag_8{ top: 6.45rem; left: 3.44rem; width: 1.72rem; } /*动画关键帧*/ @keyframes slide_left{ 0%{transform: scale(10); opacity: 0;} } @keyframes slide_down{ 0% { transform:translateY(-100%); opacity: 0; } 5% { transform:translateY(-100%); opacity: 0; } 15% { transform:translateY(0); padding-bottom: 5px; } 30% { transform:translateY(-50%); } 40% { transform:translateY(0%); padding-bottom: 6px; } 50% { transform:translateY(-30%); } 70% { transform:translateY(0%); padding-bottom: 7px; } 80% { transform:translateY(-15%); } 90% { transform:translateY(0%); padding-bottom: 8px; } 95% { transform:translateY(-10%); } 97% { transform:translateY(0%); padding-bottom: 9px; } 99% { transform:translateY(-5%); } 100% { transform:translateY(0); padding-bottom: 9px; opacity: 1; } } html,body { margin:0; padding:0; height:100%; position:relative } *,ul,li,ol { margin:0; padding:0 } a { text-decoration:none } ul,li,ol { list-style:none } .swiper-container,.container { width:100%; height:100%; min-height:580px } .swiper-slide { position:relative; width:100%; height:100%; min-height:600px; } .swiper-pagination-bullet-active { background-color:#333030 } @keyframes start { 0%,30% { opacity:0; transform:translate(0, 10px) } 60% { opacity:1; transform:translate(0, 0) } 100% { opacity:0; transform:translate(0, -8px) } }.an-1 { animation:start 1.5s infinite ease-in-out } .download { display:inline-block; float:right; height:26px; padding:0 8px; color:#fff; font-size:14px; border-radius:13px; background-color:#ff313f; cursor:pointer } .screen-1 { background-size:cover; background-image:url(./img/bg.png) } .screen-3 { background-size:cover; background-image:url(./img/bg3.png); } .row { position:relative; width:1080px; height:100%; margin:0 auto; overflow:hidden } img { width:100%; height:100%; border: none; } .header { position:fixed; top:0; left:0; z-index:20; width:100%; height:50px; padding:12px 10px 12px 10px; box-sizing:border-box; background-image: url("./img/banner.png"); background-size: cover; } .header .left{ width:1080px; margin:0 auto; overflow: hidden; } .goback { float:left; height:34px; line-height:26px; cursor:pointer; font-size:14px } .ico-goback { display:inline-block; width:43px; height:33px; background:url(./img/back.png) no-repeat; background-size:cover; vertical-align:middle; margin-right:10px; } .text { color:#f8f4f4; vertical-align:middle } .download { display:inline-block; float:right; height:26px; line-height: 26px; padding:0 8px 0 34px; color:#fff; font-size:14px; border-radius:13px; background-color:#f56c5e; cursor:pointer; background-image: url("./img/downlogo.png"); background-repeat: no-repeat; background-position: 10%; } .screen-1 .logo1 { width:158px; height:61px; position:absolute; left:0; top:84px } .screen-1 .rq_code_box { position:absolute; left:-130px; top:197px; } .btn_download li img { cursor:pointer } .screen-1 .btn_download { position:absolute; top:184px; left:156.96px } .screen-1 .btn_download li { width:235px; height:98px; margin-bottom:36px } .screen-1 .right { position:absolute; right:0; bottom:0; width:603px; height:500px; } .screen-1 .boss{ position:absolute; right:540px; bottom:232px; width:176px; height:133px; z-index: 3; } .screen-1 .desc{ position:absolute; right:554px; bottom:90px; width:141px; height:87px; z-index: 3; } .screen-1 .right .phone-1 { width:542px; height:500px; position:absolute; right:0; z-index:2; top:0; } .screen-1 .right .mantou { position:absolute; z-index:2; left:0; top:12px; } .screen-2 .left { position:absolute; width:496px; height:457px; bottom:0; } .phone-2 { position:absolute; width:496px; height:457px } .screen-2 .right { position:absolute; right:0 } .txt_4 { width:466px; height:547px; position:absolute; top:233px; right:0; } .screen-3 .left { width:287px; height:443px; position:absolute; bottom:56px; left:62px; z-index:4; } .screen-3 .back { width:201px; height:276px; position:absolute; left:290px; top:292px; } .screen-3 .right { width:827px; height:535px; position:absolute; right:0; bottom:8px; z-index: 5; } .screen-4 .left{ position: absolute; width:418px; height:428px; top:50%; margin-top: -209px; } .screen-4 .right { position:absolute; right:222px; top:40%; width:456px; height:570px; margin-top:-228px } .f_rq_code { position:absolute; right:2px; top:50%; cursor:pointer; margin-top:50px; text-align:center; transition:.3s; transform:translate3d(0, -50%, 0); z-index:10; padding:4px 4px 4px 10px } .f_rq_code .hd { width:16px; height:16px } .f_rq_code:hover .bd { display:block } .f_rq_code .bd { position:absolute; display:none; top:50%; margin-top:-70px; right:28px; width:121px; height:121px; padding:9px 10px 10px 9px; box-shadow:0 0 10px rgba(0,0,0,0.3); border-radius:3px; background-color:#fff } .f_rq_code .bd:after { position:absolute; right:-6px; top:50%; margin-top:-7px; border-left:7px solid #fff; border-top:7px dashed transparent; border-bottom:7px dashed transparent } .f_rq_code .bd:before { position:absolute; right:-7px; top:50%; margin-top:-7px; border-left:7px solid #eee; border-top:7px dashed transparent; border-bottom:7px dashed transparent } .f_rq_code .bd:after,.f_rq_code .bd:before { content:""; height:0; width:0; overflow:hidden }
  </style>
  <script type="text/javascript">
    var isMobile = (function() {
      var ua = navigator.userAgent;
      return location.host.substr(0,2)=='m.' || (screen.width/screen.height <1 || /AppleWebKit.*Mobile/i.test(ua) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(ua)) && !(/ipad/gi.test(ua));// 判断是否手机用户，排除IPAD
    })();

    window.onload = function () {
            var oHomeName = document.getElementById('homeName');
            if (isMobile) {
                oHomeName.innerText = '触屏版';
            } else {
                oHomeName.innerText = 'PC版';
            }
        }
  </script>
</head>
<body>
  <div class="header"><div class="left"><a href="/" class="goback"><i class="ico-goback"></i><span class="text" id="homeName">触屏版</span></a> <span class="download" onclick="jumpURL()">下载APP</span></div></div>
 <script src="/static/jquery.js"></script>
<script type="text/javascript">
  if(isMobile){
     $('.header .left').css({'width':'auto','margin':'auto'});
    document.write('<div id="mobile"><div class="top_blank" style="height: 50px"></div><div class="top h_center"><image class="logo" src="./img/logo.png"></image><image class="clking-hand" src="./img/hand.png"></image><image class="bubble" src="./img/bubble.png" onclick="jumpURL()"></image></div><div class="fp vh_center"><image class="fp_img" src="./img/fp.png"></image></div><div class="fp_blank"></div><div class="screen_1"><image class="bubble1" src="./img/bubble1.png"></image><image class="screen_1_img" src="./img/screen_1_img.jpg"></image><image class="tag_1" src="./img/tag_1.png"></image><image class="tag_2" src="./img/tag_2.png"></image><image class="tag_3" src="./img/tag_3.png"></image></div><div class="screen_2"><image class="bubble2" src="./img/bubble2.png"></image><image class="screen_2_img" src="./img/screen_2_img.jpg"></image><image class="tag_4" src="./img/tag_4.png"></image><image class="tag_5" src="./img/tag_5.png"></image></div><div class="screen_3"><image class="bubble3" src="./img/bubble3.png"></image><image class="screen_3_img" src="./img/screen_3_img.jpg"></image><image class="tag_6" src="./img/tag_6.png"></image><image class="tag_7" src="./img/tag_7.png"></image><image class="tag_8" src="./img/tag_8.png"></image></div><div class="v_text vh_center"><image class="v_text_img" src="./img/v_text.png"></image></div><div class="bottom vh_center"><image class="phone_download" src="./img/phone_download.png"onclick="jumpURL()"></image></div></div>');
    
  }else{
    document.write('<div class="container"><div class="swiper-container" id="pc"><div class="swiper-wrapper"><div class="swiper-slide screen-1"><div class="row"><div class="logo1 an"><a href="/" title="看漫画"><img src="img/kmlogo.png" alt="看漫画"></a></div><div class="rq_code_box"><ul class="btn_download an"><li onclick="jumpURL()"><img src="img/ios.png"></li><li onclick="jumpURL()"><img src="img/az.png"></li></ul></div><div class="boss an"><img src="img/free.png" alt="看漫画"></div><div class="desc an"><img src="img/packageImg.png" alt="看漫画"></div><div class="right"><div class="phone-1 an"><img src="img/phone1.png"></div><div class="mantou an"><img src="img/qrcode.png"></div></div></div></div><div class="swiper-slide screen-2"><div class="row"><div class="left"><div class="phone-2 an"><img src="img/phone2.png"></div></div><div class="right"><div class="txt_4 an"><img src="img/character1.png"></div></div></div></div><div class="swiper-slide screen-3"><div class="row"><div class="left an"><img src="img/book1.png" alt="看漫画"></div><div class="back an"><img src="img/book2.png" alt="看漫画"></div><div class="right an"><img src="img/book3.png" alt="看漫画"></div></div></div><div class="swiper-slide screen-4"><div class="row"><div class="left an"><img src="img/car.png" alt="看漫画"></div><div class="right an"><img src="img/bookQrCode.png" alt="看漫画"></div></div></div></div><div class="swiper-pagination"></div><div class="f_rq_code"><div class="hd"><img src="img/rq.png"></div><div class="bd"><img src="img/qr1.jpg"></div></div></div></div>');
  }
</script>
<script src="/static/swiper.js"></script>
<script>
    if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
        $('.swiper-container').css({'overflow': 'visible'})
    }
</script>
<script>
  function jumpURL(){
    var ua = navigator.userAgent.toLowerCase();
    if(/micromessenger/.test(ua) && isMobile) {  
      $('.download').hide();
    }else{
      location.href= 'http://a.app.qq.com/o/simple.jsp?pkgname=com.wbxm.icartoon';
    }
  }
  var mySwiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      direction: 'vertical',
      loop: true,
      mousewheelControl: true,
      onTransitionStart: function(swiper){
        //'bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','jello','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','flip','flipInX','flipInY','flipOutX','flipOutY','lightSpeedIn','lightSpeedOut','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideInUp','slideInDown','slideInLeft','slideInRight','slideOutUp','slideOutDown','slideOutLeft','slideOutRight','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp','hinge','rollIn','rollOut';
        
        var anArr = ['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','jello','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig'];
        var oAn = $('.swiper-slide-active .an');
        oAn.each(function(){
          var addClass = 'animated '+anArr[Math.floor(Math.random() * anArr.length)];
          var $this = $(this);
          $this.addClass(addClass);
          setTimeout(function(){
            $this.removeClass(addClass);
          },1000);
        })
      }
  });
</script>
</body>
</html>